<html>
    <head>

    </head>
    <body>
        <select#app></select>
    </body>
    <script>
        let treeData = {
            key:1,
            name:1,
            children:{
                key:2,
                name:2,
                children:{
                    key:3,
                    name:3,
                    children:{
                        key:4,
                        name:4,
                    }
                }
            }
        }

        let resultElement= ""
       
        let genChild = function(data){
            resultElement = resultElement+`<option key=${data.key}>\n`;
            resultElement = resultElement+"<caption.first>" + data.name+"</caption>\n"
            if(data.children){
                genChild(data.children);
            }
            resultElement = resultElement + `</option>`
        }
        genChild(treeData);
        console.log('r',resultElement);

        document.querySelector("#app").content(resultElement);
    </script>
</html>